<template>
	<view>
		<view class="bg-red-gradient"style="height: 500rpx;" >
			
		</view>
		
		<view class="flex   text-white  text-center" style="font-size: 50rpx; position: absolute;width: 100%; top: 60rpx;">
			
			<view class="flex " @click="returnBack()">
				<u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
			</view>
			<view class="flex-1 font-weight-bold">
				<text style="font-family:times;">LeaderBoard</text>
			</view>
		</view>
		<view class="flex   justify-center p-2" style="position: absolute;width: 100%; top: 120rpx;">
		
			<view class="flex-column">
					<view class="" style="height: 80rpx;"> 
						
					</view>
					<image class="rounded-circle shadow" src="../../../static/努力.png" mode="" style="width: 110rpx;height: 110rpx;"></image>
					<view class="justify-center flex">
						<text class="text-white" style="font-family:times;">2nd</text>
					</view>
					
				
			</view>
			<view class="flex-column  " style="margin-left: 100rpx;margin-right: 100rpx;">
				<image class="rounded-circle shadow" src="../../../static/头像.png" mode="" style="border:#da0000 8rpx solid; width: 180rpx;height:180rpx;"></image>
				<view class=" justify-center flex">
					<text class="font-weight-bold text-white font-lg" style="font-family:times;">1st</text>
				</view>
			</view> 
			<view class="flex-column ">
				<view class="" style="height: 80rpx;">
					
				</view>
				<image class="rounded-circle shadow" src="../../../static/排行榜.png" mode="" style="width: 110rpx;height: 110rpx;"></image>
				<view class=" justify-center flex">
					<text class="text-white"style="font-family:times;">3rd</text>
				</view>
			</view>
			
		</view>
		
		<view class="" >
			<view class="flex p-2 text-light-black shadow-bottom">
				<view class="flex-1 text-center border-right">
					<text>名称</text>
				</view>
				<view class="flex-1 text-center">
					<text>得分</text>
				</view>
			</view>
			<view class="px-2">
				<view class="flex p-3 text-light-black my-3 shadow-bottom  rounded-lg" v-for="(item,index) in list" :key="index">
					<view class="flex flex-1 justify-center">
						<view class="position-relative font">
							<view class="rounded-circle  text-white bg-blue-gradient text-center" style="z-index: 100; position: absolute; width: 40rpx;height: 40rpx; left: -15rpx; bottom: 1rpx;">
								{{index+1}}
							</view>
						</view>
						
				
						<image class="rounded-circle  mr-2" :src="item.avatar" mode="" style="width: 100rpx;height: 100rpx;"></image>
						<view class="flex-1   text-center  align-center flex justify-start ">
							<text class="font-md" style="color:#ffaa00;">{{item.name}}</text>
						</view>
					</view>
					
					<view class="flex-1 text-center flex align-center justify-center">
						<text class="font-weight-bold text-light-muted">{{item.score}}分</text>
					</view>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list:[
					{
						avatar:'../../../static/头像.png',
						name:'qinzilong',
						score:100
					},
					{
						avatar:'../../../static/努力.png',
						name:'gpp',
						score:60
					},
					{ 
						avatar:'../../../static/排行榜.png',
						name:'insiinc',
						score:50
					}
				]
			}
		},
		beforeMount() {
			
		
		},
		computed: 
		{
			
		}, 
		methods: {
			returnBack()
			{
				uni.navigateBack({
					delta: 1
				});
			},
			tooLongName(name){
				if(name.length>7)
					return name.slice(0,7)+'...'
				else
					return name
			
			}
		}
	}
</script>

<style>
 .overflow{

			width: 35rpx;
			white-space: nowrap;/*设置不换行*/
			overflow: hidden; /*设置隐藏*/
			text-overflow: ellipsis; /*设置隐藏部分为省略号*/
            }
</style>
